<template>
    <section class="header_profile">
        <div class="showloginInformation" v-if="isLogin">
            <div class="avatar">
                <div class="box">
                    <img :src="userInfo.avatar" alt="用户头像" v-if="!hasAvatar(userInfo.avatar)">
                    <div class="svg" v-else>
                        <svg  t="1587545175014" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10677" width="32" height="32">
                            <path d="M0 512a512 512 0 1 0 1024 0 512 512 0 0 0-1024 0z" fill="#7FC2FF" p-id="10678"></path>
                            <path d="M840.594286 850.797714A463.542857 463.542857 0 0 1 511.707429 987.428571 463.542857 463.542857 0 0 1 182.857143 850.797714v-299.264C182.857143 368.128 330.093714 219.428571 511.707429 219.428571c181.650286 0 328.886857 148.699429 328.886857 332.068572 0.731429 173.092571 0.731429 272.859429 0 299.300571z" fill="#EBF9FF" p-id="10679"></path>
                            <path d="M329.142857 457.142857a54.857143 54.857143 0 1 0 109.714286 0 54.857143 54.857143 0 0 0-109.714286 0zM585.142857 457.142857a54.857143 54.857143 0 1 0 109.714286 0 54.857143 54.857143 0 0 0-109.714286 0zM402.285714 585.142857a109.714286 109.714286 0 0 0 219.428572 0" fill="#66B5FF" p-id="10680"></path></svg>
                    </div>
                </div>
            </div>
            <div v-bind:class="['info', { eduBlank: !showEduInfo(educationInfo) }]">
                <div class="userInfo">
                    <span class="nickname">{{ userInfo.nickname }}</span>
                </div>
                <div class="schoolInfo" v-if="showEduInfo(educationInfo)">
                    <span class="schoolName">{{ educationInfo.school }}</span>
                    <span class="college">
            {{ educationInfo.enrollment }}届&nbsp;{{ educationInfo.degree }}
          </span>
                    <span>签名：{{ userInfo.signature }}</span>
                </div>
                <div class="educationBlank" v-else>
                    <van-icon name="edit" />
                    <span class="tips">&nbsp;&nbsp;{{ $t("improveYourProfile") }}</span>
                </div>
            </div>
            <router-link :to="{name: 'profileInfo'}" tag="div" class="modify">
                <van-icon name="arrow" />
            </router-link>
        </div>
        <div class="shownologinInfo" v-else>
            <router-link :to="{name: 'login'}" tag="div" class="unloginWidget">
                <div class="avatarWidget">
                    <van-icon name="friends" />
                </div>
                <div class="textWidget">
                    <div class="topText">{{ $t("login_register") }}</div>
                    <div class="bottom-text">
                        <van-icon name="gift" />
                        <span>{{ $t("loginSlogan") }}</span>
                    </div>
                </div>
                <div class="rightAngle">
                    <van-icon name="arrow" />
                </div>
            </router-link>
        </div>
    </section>
</template>

<script>
import { Icon } from 'vant';
import { mapState } from 'vuex';

export default {
    name: 'head-profile',
    computed: {
        // 是否显示教育信息组件
        showEduInfo () {
            return function (eduInfoObject) {
                return eduInfoObject.degree && eduInfoObject.enrollment && eduInfoObject.school;
            };
        },
        // 检测用户头像是否实自定义头像
        hasAvatar () {
            return function (path) {
                return !path || path.includes('default-avatar.jpeg');
            };
        },
        ...mapState(['userInfo', 'educationInfo', 'isLogin'])
    },
    components: {
        [Icon.name]: Icon
    }
};
</script>

<style scoped lang="less" src="./less/head-profile.less"></style>
